<template>
	<view style="padding-bottom: 150rpx;">
		<view class="mainpadding">
			<view class="flexbetween">
				<view class="titletext bold hei_text">充值项设置</view>
				<view class="tianjia" @click="show=true">添加</view>
			</view>
			<view class="flexcenter" v-if="!list.length">
				<view class="placeholderimage" style="margin-top: 300rpx;" ></view>
			</view>
			<view class="mainpadding margin_top" style="background-color: #f6f6f6;" v-if="list.length">
				<view class="flexbetween" v-for="(item,index) in list" :key="item.id" :class="index!=0?'margin_top':''">
					<view class="ffffff czpadding strongtext margin_right2" style="width: 80%;">充{{item.price}}送{{item.send_price}}元</view>
					<view class="ffffff czpadding strongtext textcenter" style="width: 15%;" @click="edit(item)">修改</view>
				</view>
			</view>
		</view>
		<view class="mainpadding gudingdb">
			<view class="bigbtn" @click="jumpurl('/pages_mypage/chongzhijl')">记录</view>
		</view>
		<u-modal :show="show" title="充值项管理" confirmText="确认" @confirm="chongzhi" cancelText="取消"
			@cancel="chongzhicancel" showCancelButton>
			<view class="slot-content" style="width: 600rpx;">
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text">充：</view>
					<input type="number" class="textright" placeholder="请输入充值金额" v-model="price">
				</view>
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text">送：</view>
					<input type="number" class="textright" placeholder="请输入赠送金额" v-model="send_price">
				</view>
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text">权重：</view>
					<input type="number" class="textright" placeholder="请输入" v-model="weigh">
				</view>
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text">状态：</view>
					<view class="flexright">
						<u-radio-group v-model="status" placement="row" circle>
							<u-radio activeColor="#1ba95b" label="启用" :customStyle="{marginRight: '30rpx'}"
								name="normal"></u-radio>
							<u-radio activeColor="#1ba95b" label="禁用" name="hidden"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="bigbtn margin_top" v-if="listid" @click="delitem">删除</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				price: "",
				send_price: "",
				status: "normal", //状态:normal=启用,hidden=禁用
				weigh: "",
				show: false,
				list:[],
				listid:"",
				user_zbfapply_listid:""
			}
		},
		onLoad(options) {
			this.user_zbfapply_listid=options.user_zbfapply_listid
			this.init()
		},
		methods: {
			jumpurl(url){
				uni.navigateTo({
					url:url+"?user_zbfapply_listid="+this.user_zbfapply_listid
				})
			},
			edit(item){
				this.listid = item.id
				this.price = item.price
				this.send_price = item.send_price
				this.status = item.status
				this.weigh = item.weigh
				this.show = true
			},
			delitem(){
				httpRequest.request('/api/user/delRechargeItem', 'GET', {
					id:this.listid,
					user_zbfapply_id:this.user_zbfapply_listid
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.chongzhicancel()
						this.init()
					}
				})
			},
			chongzhicancel(){
				this.price = ""
				this.send_price = ""
				this.status = "normal"
				this.weigh = ""
				this.listid = ""
				this.show = false
			},
			chongzhi(){
				let url = "/api/user/addRechargeItem"
				let data={
					price:this.price,
					send_price:this.send_price,
					status:this.status,
					weigh:this.weigh,
					user_zbfapply_id:this.user_zbfapply_listid
				}
				if(this.listid){
					this.$set(data,"id",this.listid)
					url = "/api/user/editRechargeItem"
				}
				httpRequest.request(url, 'GET', data).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.chongzhicancel()
						this.init()
					}
				})
			},
			init() {
				httpRequest.request('/api/user/fbRechargeIte', 'GET', {
					user_zbfapply_id:this.user_zbfapply_listid
				}, false, false, true).then(res => {
					
					this.list = res.data
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.tianjia {
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		border: 1rpx solid #333;
		font-size: 24rpx;
		color: #333;
	}

	.czpadding {
		padding: 20rpx 20rpx;
		border-radius: 5rpx;
	}
</style>